<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>form表单的异步提交</title>
        <style>
            
        </style>

    </head>
    <body>
       <h3>查询证书</h3>
       <!-- ajax的异步请求表单提交到data4接口时，请求体的数据是 sn=xxxx&n=1&m=2 -->
       <form onsubmit="return querysn(this)">
            <div>
                <label >证书编号</label>
                <input type="text" name="sn">
            </div>
            <div>
                <button>查询</button>
            </div>
       </form>
       <div id="ret"></div>
       <script>
            function querysn(_form){
                let form_data = "sn=" + _form.sn.value;
                fetch("/cgi-bin/data4",
                    {   method:"POST",
                        body:form_data,
                        headers:{
                            "content-type":"application/x-www-form-urlencoded"
                        }
                    }).then(resp=>resp.json()).then(data=>{
                        // 约定的响应json数据的格式：{code: 0,sn:10001, "/img/生态地球.png"}
                        //
                        if(data.code == 0){
                            // 成功
                            ret.innerHTML = "<img src='"+data.img+"'width=200px>"
                        }
                        else{
                            ret.innerHTML = "<b style='color:red'>"+data.msg+"</b>"
                        }
                    })
                return false;
            }
       </script>
    </body>
</html>